import React, { Component, PropTypes } from 'react'
import { fetchPost } from './../request'
import { Table, Card, Button, Form, Upload, message, Modal, Select, Input, Icon, Checkbox, Popconfirm } from 'antd'
import {origin} from '../../../../utils/config'
import {origin_promotion} from '../../../../utils/config'
import Filter from './Filter.jsx'

const FormItem = Form.Item
const Option = Select.Option
const CheckBoxGroup = Checkbox.Group

class List extends React.Component {
  constructor (props) {
    super(props)
    this.changeIsLoading = this.changeIsLoading.bind(this)
    this.getSearchData = this.getSearchData.bind(this)
    this.changeIsLoading = this.changeIsLoading.bind(this)

    this.state = {
      data: [],
      isLoading: true,
      params: {
        pushLocalType: '0',
        userType: '1'
      },
      visible: false,
      paramsCache: null,
      page: {
        currentPage: 1,
        pageSize: 10
      }
    }

  }

  componentDidMount () {
    this.getData()
  }

  getData () {
    let postParams = {};
    let appType = window.sessionStorage.getItem('appCode')
    if(this.state.paramsCache != null) {
      postParams = this.state.paramsCache;
      postParams.currentPage = this.state.page.currentPage;
      this.getSearchData(postParams);
    }
    else {
      postParams.pageSize = this.state.page.pageSize;
      postParams.currentPage = this.state.page.currentPage;
      fetchPost(`/invitationmanager/list`, postParams,origin_promotion).then(json => {
        if (json.data && json.code === 0) {
          let data = json.data.itemList
          this.state.page = json.data.page;
          this.setState({
            data: data
          })
        }
      })
    }
  }
  getSearchData (params) {
    this.state.paramsCache = params;
    fetchPost(`/invitationmanager/queryByParams`,params,origin_promotion).then(json => {
      if (json.data && json.code === 0) {
        let data = json.data.itemList
        this.state.page = json.data.page;
        this.setState({
          data: data
        })
      }
    })
  }

  changeIsLoading () {
    let a = !this.state.isLoading
    this.setState({
      isLoading: a
    })
  }
  nextPage (currentPage) {
    this.setState({
      page: {
        ...this.state.page,
        currentPage,
      }
    }, () => {
      this.getData()
    })
  }
  handleReset () {
    this.props.form.resetFields()
    this.setState({
      data: [],
      visible: false,
      params: {
        pushLocalType: '0',
        userType: '1'
      },
      page: {
        currentPage: 1,
        pageSize: 10
      }
    }, () => {
      this.getData()
    })
  }

  render () {
    let self = this

    const columns = [
      {
        title: '用户',
        dataIndex: 'userName',
        key: 'userName'
      }, {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
      }, {
        title: '金额',
        dataIndex: 'amount',
        key: 'amount'
      }, {
        title: '服务费',
        dataIndex: 'serviceFee',
        key: 'serviceFee'
      }, {
        title: 'app',
        dataIndex: 'appCodeString',
        key: 'appCodeString'
      }, {
        title: '状态',
        dataIndex: 'statusString',
        key: 'statusString'
      }, {
        title: '操作',
        dataIndex: '',
        key: '',
        render: (text, record) => {
          if(record.statusString == "待审核") {
            return (
              <div style={{display:'flex',flexDirection: 'row',justifyContent: 'center'}}>
                <Popconfirm title={`是否确认已打款`} onConfirm={() => {this.passVerify(record)}}>
                  <a  style={{ margin : 5, color: '#87CEEB' }}>已打款</a>
                </Popconfirm>
                <Popconfirm title={`是否确认打款失败`} onConfirm={() => {this.rejectVerify(record)}}>
                  <a  style={{ margin : 5, color: '#87CEEB' }}>打款失败</a>
                </Popconfirm>
              </div>
            )
          }
        }
      }
    ]

    let {getFieldDecorator} = this.props.form
    const formItemLayout = {
      labelCol: {span: 5},
      wrapperCol: {span: 10},
    }

    const pagination = {
      total: self.state.page.totalCount,
      pageSize: self.state.page.pageSize,
      showSizeChanger: false,
      showQuickJumper: true,
      showTotal (total) {
        return `Total ${total} `
      },
      onChange (current) {
        self.nextPage(current)
      }
    }
    return (
      <div>
        <Modal
          visible={this.state.visible}
          onCancel={() => {
            this.handleReset()
          }}
          footer={null}
        >
        </Modal>
        <Card>
          <Filter changeIsLoading={this.changeIsLoading} getSearchData={this.getSearchData} getData={this.getData} />

          <Table pagination={pagination} rowKey='invitationAwardId' size="small" key='invitationAwardId' columns={columns} dataSource={self.state.data}
                 bordered
          >
          </Table>
        </Card>
      </div>
    )
  }
  passVerify(record) {
    fetchPost(`/invitationmanager/${record.invitationBillId}/pass`,null, origin_promotion).then((res) => {
      if(res.code === 0) {
        this.getData();
      }
    })
  }
  rejectVerify(record) {
    fetchPost(`/invitationmanager/${record.invitationBillId}/reject`,null, origin_promotion).then((res) => {
      if(res.code === 0) {
        this.getData();
      }
    })
  }
}

List = Form.create()(List)
export default List


